<template>
  <div class="global-container">
    <div class="global-header">
      <el-image
        style="width: 100px; height: 100px"
        :src="require('@/assets/header_images/current.png')"
      ></el-image>
      <div class="title">
        存储类管理
        <div class="title-content">
          提供容器云集群中存储类管理，支持查看当前集群中提供的存储类信息
        </div>
      </div>
    </div>
    <div class="searchDiv1">
      <div class="searchDiv global-operate">
        <span class="keyword">关键词：</span>
        <el-input
          v-model="searchInput"
          class="inputStyle"
          clearable
          placeholder="请输入名称进行搜索"
          style="width: 20%"
          prefix-icon="el-icon-search"
          @input="handleSearch"
        />
      </div>
    </div>
    <div>
      <div class="servicePackageList">
        <div>
          <el-table
            ref="multipleTable"
            :data="filteredData"
            style="width: 100%"
            :cell-style="{ textAlign: 'left', paddingLeft: '30px' }"
            :header-cell-style="{ textAlign: 'left', paddingLeft: '30px' }"
            height="63vh"
          >
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="isDefault" label="默认存储类" />
            <el-table-column prop="reclaimPolicy" label="回收策略">
              <template slot="header" slot-scope="scope">
                <span @click="showRecDetail">
                  {{ scope.column.label }}
                  <i class="el-icon-question" style="margin-left: 5px"></i>
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="volumeBindingMode" label="绑定模式">
              <template slot="header" slot-scope="scope">
                <span @click="showBindDetail">
                  {{ scope.column.label }}
                  <i class="el-icon-question" style="margin-left: 5px"></i>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="供应者">
              <template slot-scope="scope">
                <el-tooltip
                  effect="dark"
                  :content="scope.row.provisioner"
                  placement="bottom-start"
                  popper-class="tooltipClass"
                  :disabled="isShowTooltip"
                >
                  <div
                    class="descSpan"
                    style="text-align: left"
                    @mouseover="onMouseOver($event)"
                  >
                    {{ scope.row.provisioner }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="创建时间">
              <template slot-scope="scope">
                <el-tooltip
                  effect="dark"
                  :content="scope.row.createTime"
                  placement="bottom-start"
                  popper-class="tooltipClass"
                  :disabled="isShowTooltip"
                >
                  <div
                    class="descSpan"
                    style="text-align: left"
                    @mouseover="onMouseOver($event)"
                  >
                    {{ scope.row.createTime }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="margin-top: 10px; float: right">
          <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            :total="page.total"
            :page-size="page.pageSize"
            :page.sync="page"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <el-dialog
      title="回收策略"
      :visible.sync="recDialogVisible"
      width="35%"
      @close="recDialogVisible = false"
    >
      <p class="titleF">1.Retain(保留)</p>
      <p class="titleS">
        当PVC被删除时,PV不会自动删除,而是变为“已释放”状态。管理员需要手动回收该PV。这种策略允许管理员保留数据,以便将来可以重新使用或迁移到其他PV。
      </p>
      <p class="titleF">2.Recycle(回收)</p>
      <p class="titleS">Recycle策略会尝试清除PV中的数据,以便可以重新使用。</p>
      <p class="titleF">3.Delete(删除)</p>
      <p class="titleS">
        当PVC被删除时,与其相关联的PV也会被自动删除。同时,与PV相关联的底层存储资源也会被删除。
      </p>
    </el-dialog>
    <el-dialog
      title="绑定模式"
      :visible.sync="bindDialogVisible"
      width="35%"
      @close="bindDialogVisible = false"
    >
      <p class="titleF">1.Immediate(立即绑定)</p>
      <p class="titleS">
        当创建一个PVC时,Kubernetes会立即绑定一个可用的PV来满足PVC的需求。如果没有可用的PV,则会自动创建一个新的PV来满足PVC的需求。
      </p>
      <p class="titleF">2.WaitForFirstConsumer(等待第一个消费者)</p>
      <p class="titleS">
        当创建一个PVC时,Kubernetes不会立即绑定一个PV。相反,它会等待第一个消费者(Pod)使用这个PVC。一旦有Pod使用了这个PVC,Kubernetes会自动绑定一个可用的PV来满足PVC的需求。
      </p>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "StorageClassManage",
  data() {
    return {
      searchInput: "", // 输入框
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      tmpPage: {
        pageSize: 10,
        pageNum: 1,
        filterKey: "",
        tenantId: "",
      },
      isShowTooltip: false,
      tableData: [], // 数据
      filteredData: [], // 过滤后的数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示条数
      total: 0, // 总条数
      recDialogVisible: false,
      bindDialogVisible: false,
    };
  },
  mounted() {
    this.getAllStorageClass();
  },
  methods: {
    onMouseOver(event) {
      const ev = event.target;
      const evWeight = ev.scrollWidth;
      const contentWidth = ev.clientWidth;
      if (evWeight > contentWidth) {
        this.isShowTooltip = false;
      } else {
        this.isShowTooltip = true;
      }
    },
    // 处理每页显示条数变化
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAllStorageClass();
    },
    // 处理当前页码变化
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getAllStorageClass();
    },
    // 获取数据
    getAllStorageClass() {
      this.$storagePvcApi.getAllStorageClass().then((res) => {
        console.log(res);
        this.tableData = res.data;
        this.filteredData = res.data;
        // this.total = res.data.length;
        this.page.total = res.data.length;
      });
    },
    // 处理搜索
    handleSearch() {
      if (this.searchInput === "") {
        this.filteredData = this.tableData;
      } else {
        this.filteredData = this.tableData.filter((item) =>
          item.name.includes(this.searchInput)
        );
      }
    },
    // 显示对话框
    showRecDetail() {
      this.recDialogVisible = true;
    },
    showBindDetail() {
      this.bindDialogVisible = true;
    },
  },
};
</script>

<style lang="css" scoped>
.titleF {
  font-size: 16px;
  margin-bottom: 6px;
  color: #409eff;
}

.titleS {
  text-indent: 2em;
  color: #304156;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #304156;
}

::v-deep .el-dialog__body {
  padding: 0px 20px 30px;
}
</style>

